<template>
    <div class="comp-import" v-loading.fullscreen="loading">
        <div class="comp-import__head" @dragover.prevent.stop @drop.prevent.stop="onDrop($event)" @click="onDrop()">
            <div class="icon"></div>
            <div class="name">
                <span v-if="file.value">{{ file.name }}</span>
                <span v-else>点击选择文件，或将文件拖拽到这里</span>
            </div>
            <div class="size">
                <span v-if="file.value">{{ file.size }}</span>
                <span v-else>Excel 或 CSV 文件</span>
            </div>
        </div>
        <div class="comp-import__body">
            <div class="line">
                <span class="text">·</span>
                <span class="text">请确保文件格式符合模板格式</span> 
                <a class="link" :href="template" target="_blank" v-if="template">下载模版</a>
            </div>
            <div class="line">
                <span class="text">·</span>
                <span class="text">如果文件内有多个工作表只有第一张工作表会被处理</span>
            </div>
            <div class="line">
                <span class="text">·</span>
                <span class="text">文件大小不能超过10MB</span>
            </div>
        </div>
        <div class="comp-import__foot">
            <el-button type="primary" size="small" icon="el-icon-check" @click="onClick('start')">确定导入</el-button>
            <el-button type="plain" size="small" icon="el-icon-close" @click="onClick('end')">放弃</el-button>
        </div>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int, float, selectFile } from "../util";
    export default {
        name: "comp-import",
        mixins: [mixin],
        props: {
            template: { type: String, default: null },
        },
        data: () => ({
            loading: false,
            file: {
                name: "",
                size: "",
                value: null,
            },
        }),
        methods: {
            onDrop(event) {
                if (this.loading) return;
                let file = this.file;
                let transfer = event ? event.dataTransfer : null;
                let callback = (data) => {
                    file.name = data.name;
                    file.size = data.size > 1048576 ? float(data.size / 1048576, 2) + "MB" : float(data.size / 1024, 2) + "KB";
                    file.value = data;
                };
                if (transfer) [].slice.call(transfer.items).some((item) => {
                    let file = item.getAsFile() || {};
                    let valid = file.size > 0 && /\.(xls|xlsx|csv)$/i.test(file.name);
                    if (valid) callback(file);
                    return valid;
                });
                else selectFile(".xls,.xlsx,.csv", this.$el).then((file) => callback(file));
            },
            onClick(name) {
                if (this.loading) return;
                let file = this.file;
                if (name === "start" && file.value) this.$emit(name, file.value);
                else if (name === "start") this.plugins.modal.toast("请先选择一个文件！", "error");
                else if (name === "end") this.$emit(name);
            },
        },
    };
</script>

<style lang="scss">
    .comp-import {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .comp-import__head {
        flex: 0 0 auto;
        border: dashed 1px #ddd;
        border-radius: 4px;
        padding: 40px;
        background-color: #fafafa;
        cursor: pointer;

        & > .icon {
            display: block;
            margin: 0 auto;
            width: 100px;
            height: 50px;
            background: url() no-repeat center center/contain;
        }

        & > .name {
            margin-top: 20px;
            color: #333;
            font-size: 16px;
            line-height: 20px;
            text-align: center;
        }

        & > .size {
            margin-top: 10px;
            color: #999;
            font-size: 14px;
            line-height: 1;
            text-align: center;
        }
    }

    .comp-import__body {
        flex: 0 0 auto;
        margin-top: 20px;

        & > .line {
            color: #999;
            font-size: 14px;
            line-height: 20px;

            & > .text {
                margin-right: 0.5em;
            }

            & > .link {
                margin-right: 0.5em;
                color: #1677ff;
                text-decoration: none;
                user-select: none;
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .comp-import__foot {
        flex: 0 0 auto;
        margin-top: 20px;
        border-top: solid 1px #eee;
        padding-top: 20px;
        text-align: center;
    }
</style>